<style scoped>
@import "./log.less";
</style>
<template>
  <div>
    <Row>
      <Col span="24">
      <Card style="margin-bottom: 10px">
        <Form inline>
          <FormItem style="margin-bottom: 0">
            <Select v-model="searchConf.type"
                    clearable
                    placeholder="请选择类别"
                    style="width:100px">
              <Option :value="1">操作URL</Option>
              <Option :value="2">用户昵称</Option>
              <Option :value="3">用户ID</Option>
            </Select>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Input v-model="searchConf.keywords"
                   placeholder=""></Input>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Button type="primary"
                    @click="search">查询/刷新</Button>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Button type="error"
                    @click="deleteAll">批量删除</Button>
          </FormItem>
        </Form>
      </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <Card>
        <div>
          <Table ref="selection"
                 :columns="columnsList"
                 :data="tableData"
                 :loading="tableLoading"
                 @on-selection-change="selectionChage"
                 border
                 disabled-hover></Table>
        </div>
        <div class="margin-top-15"
             style="text-align: center">
          <Page :total="tableShow.listCount"
                :current="tableShow.currentPage"
                :page-size="tableShow.pageSize"
                @on-change="changePage"
                @on-page-size-change="changeSize"
                show-elevator
                show-sizer
                show-total></Page>
        </div>
      </Card>
      </Col>
    </Row>
  </div>
</template>
<script>

import expandRow from './table_expand.vue';
import api from '@/api/log';

const deleteButton = (vm, h, currentRow, index) => {
  return h('Poptip', {
    props: {
      confirm: true,
      title: '您确定要删除这条数据吗? ',
      transfer: true
    },
    on: {
      'on-ok': () => {
        api.delLog({
          id: currentRow.id
        }).then(data => {
          vm.tableData.splice(index, 1);
        })
      }
    }
  }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '删除')
    ]);
};

export default {
  name: 'system_user',
  components: { expandRow },
  data () {
    return {
      columnsList: [
        {
          title: '序号',
          type: 'selection',
          width: 65,
          align: 'center'
        },
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            });
          }
        },
        {
          title: '行为名称',
          align: 'center',
          key: 'action_name'
        },
        {
          title: '用户ID',
          align: 'center',
          key: 'uid',
          width: 120
        },
        {
          title: '用户昵称',
          align: 'center',
          key: 'nickname',
          width: 100
        },
        {
          title: '操作URL',
          align: 'center',
          key: 'url',
          width: 200
        },
        {
          title: '执行时间',
          align: 'center',
          key: 'add_time',
          width: 160
        },
        {
          title: '操作',
          align: 'center',
          key: 'handle',
          width: 125,
          handle: ['delete']
        }
      ],
      tableData: [],
      delIds:[],
      tableLoading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        type: '',
        keywords: '',
        status: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      }
    };
  },
  created () {
    this.init();
    this.getList();
  },
  methods: {
    init () {
      let vm = this;
      this.columnsList.forEach(item => {
        if (item.handle) {
          item.render = (h, param) => {
            let currentRowData = vm.tableData[param.index];
            return h('div', [
              deleteButton(vm, h, currentRowData, param.index)
            ]);
          };
        }
      });
    },
    changePage (page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    changeSize (size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    search () {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    async getList () {
      let vm = this;
      this.tableLoading = true;
      let data = await api.getLogList({
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        type: vm.searchConf.type,
        keywords: vm.searchConf.keywords
      })

      vm.tableData = data.list;
      vm.tableShow.listCount = data.count;
      this.tableLoading = false;
    },
    deleteAll () {
        api.delLog({
          id: this.delIds
        }).then(data => {
          this.getList()
        })

    },
    selectionChage (list) {
      let arr = []
      for (let item in list) {
        arr = [ ...arr, list[item].id ]
      }
      this.delIds = arr
    }
  }
};
</script>
